<template>
  <div>
    <el-page-header @back="goBack" content="个人主页"/>
    <br><br>
    <p><font style="font-family: 华文行楷">&nbsp;&nbsp;投诉</font> </p>
    <el-form ref="form" label-width="80px" size="mini">
      <el-form-item size="large">
       投诉类型:&nbsp;&nbsp;<el-select v-model="value" placeholder="请选择投诉类型">
          <el-option
              v-for="item in options"
              :key="item.value"
              :label="item.label"
              :value="item.value">
          </el-option>
        </el-select>
        <br><br>
        被投诉人ID:
        <el-input v-model="ID" placeholder="请输入被投诉人ID"></el-input>
        <br><br>
        投诉原因:
          <div class="res">
            <el-input
              type="textarea"
              :rows="6"
              placeholder="请输入投诉原因"
              v-model="reason">
          </el-input>
          </div>
        <br><br>
        <el-button type="primary" @click="onSubmit()">投诉</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import {addComplaints} from '../../api/index';
export default {
  data() {
    return {
      options: [{
        value: '超时',
      }, {
        value: '逃单',
      }, {
        value: '信息虚假',
      }],
      value: '',
      reason:'',
        ID:''
    };
  },
  methods: {
    onSubmit() {
      console.log(this.value)
      console.log(this.reason)
      console.log(this.ID)
      addComplaints({id:window.localStorage.getItem('id'),type:this.value,reason:this.reason,complained:this.ID}).then(res=>{
        console.log(res.data.code)
        if(res.data.code===100){
          this.$message({
            type:'success',
            message:'投诉成功'
          })
          this.ID=''
          this.reason=''
        }
      })
    },
    goBack(){
      this.$router.push({path:'/Mine'})
    }
  }
};
</script>

<style>
.res{
  margin-right: 100px;
  margin-left: 30px;
}
</style>
